import React, { Component } from "react";
import { NavBar } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import myaxios from "../../untils/myaxios";
import "./Category.css";

export default class Category extends Component {
  state = {
    categories: [], //返回的菜单数据
    categories_content: [], //右边菜单渲染的内容
    select_index: 0, //当前选中左边的菜单
  };
  leftClickHandle = (e) => {
    //console.log(e.target);
    //console.log(e.target.dataset.index);
    let select_index = e.target.dataset.index * 1;
    // console.log(this.state.categories[1]);

    this.setState({
      categories_content: this.state.categories[select_index].children,
      select_index,
    });
  };
  //设置分类菜单的数据
  //is_storaged 代表是否之前已经缓存
  // setCategories = (res, is_storaged) => {
  //   //缓存请求的数据
  //   let categories_catch = {};
  //   if (is_storaged) {
  //     //直接获取本地缓存的数据
  //     return (categories_catch = JSON.parse(
  //       localStorage.getItem("categories_catch")
  //     ));
  //   }
  //   categories_catch = {
  //     data: Date.now(),
  //     categories: res,
  //   };
  //   //缓存到本地
  //   localStorage.setItem(
  //     "categories_catch",
  //     JSON.stringify(categories_catch),
  //     60000
  //   );
  //   this.setState({
  //     categories: res,
  //     categories_content: res[0].children,
  //   });
  // };
  // 获取分类菜单的数据
  getCategories = () => {
    myaxios
      .get("categories")
      .then((res) => {
        //缓存到本地
        this.setExpire("categories_catch", JSON.stringify(res), 60000);
        this.setState({
          categories: res,
          categories_content: res[0].children,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };
  setExpire = (key, value, expire) => {
    let obj = {
      data: value,
      time: Date.now(),
      expire: expire,
    };
    //localStorage 设置的值不能为对象,转为json字符串
    localStorage.setItem(key, JSON.stringify(obj));
  };

  getExpire = (key) => {
    let val = localStorage.getItem(key);
    if (!val) {
      return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
      localStorage.removeItem(key);
      return null;
    }
    return val.data;
  };
  componentDidMount() {
    //加载所有分类商品的数据

    //console.log(res);

    let categories_cache = JSON.parse(this.getExpire("categories_catch"));
    //console.log(categories_cache);
    if (categories_cache) {
      // console.log(123);
      return this.setState({
        categories: categories_cache,
        categories_content: categories_cache[0].children,
      });
    }
    this.getCategories();
  }
  render() {
    let { categories, categories_content } = this.state;
    return (
      <div className="yg-category">
        {/* 首页导航条 */}
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购商城</NavBar>
        </div>
        {/* 首页搜索框 */}
        <div className="yg-index-search">
          <SearchInput />
        </div>
        {/* 分类菜单开始 */}
        <div className="yg-category-content">
          {/* 利用冒泡机制处理点击事件 */}
          <div className="content-left" onClick={this.leftClickHandle}>
            {categories.map((v, index) => {
              return (
                <div
                  data-index={index}
                  className={
                    this.state.select_index == index
                      ? "active content-left-item"
                      : "content-left-item"
                  }
                  key={v.cat_id}
                >
                  {v.cat_name}
                </div>
              );
            })}
          </div>
          <div className="content-right">
            {categories_content.map((v) => {
              return (
                <div key={v.cat_id} className="content-right-item">
                  <div className="right-item-name">
                    {"/" + v.cat_name + "/"}
                  </div>
                  <div className="right-item-box">
                    {v.children &&
                      v.children.map((v2) => {
                        return (
                          <div key={v2.cat_id} className="right-item-del">
                            <div>
                              <img src={v2.cat_icon} alt="" />
                            </div>
                            <div>{v2.cat_name}</div>
                          </div>
                        );
                      })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
